<route lang="json5">
{
  style: {
    navigationBarTitleText: '商户支付',
  },
}
</route>
<template>
  <view class="head flex items-center bg-color">
    <view>
      <image class="w-[100rpx] h-[100rpx] p-[40rpx]" src="/static/images/account.png"></image>
    </view>
    <view class="text-xl">熹埠眼镜武汉体育中心店</view>
  </view>

  <view class="bg-color p-[50rpx]">
    <view class="flex items-center catian h-[150rpx] bg-white font-max">
      ￥
      <!-- <input
        type="number"
        v-model="money"
        placeholder="请输入金额"
        @catchtouchstart="showKeyBoard"
        class="input-box"
        readonly="readonly"
      /> -->
      <wd-input
        type="text"
        v-model="money"
        placeholder="请输入金额"
        readonly
        @click="showKeyBoard"
        class="w-[100%] fontmax"
      />
    </view>
  </view>

  <view class="h-[900rpx] flex-end bg-color">
    <view class="remark">添加备注</view>
    <view class="bg-blue h-[100rpx]" @click="payment">付款</view>
  </view>
  <wd-number-keyboard
    v-model:visible="visible"
    mode="custom"
    extra-key="."
    close-text="完成"
    @input="onInput"
    @delete="onDelete"
  ></wd-number-keyboard>
</template>

<script setup>
// const $http = inject('$http')
import { qrCodePay } from '@/service/card/card' // 看这里
const { loading, error, data, run } = useRequest(() => qrCodePay(formdata.value))

const money = ref('')

const visible = ref(false)

function showKeyBoard(event) {
  wx.hideKeyboard()
  visible.value = true
}

const onInput = (value) => {
  money.value += value
}
const onDelete = () => {
  money.value = money.value.slice(0, money.value.length - 1)
}

const merchantId = ref('1854256213215')

const formdata = ref({
  merchantId: merchantId.value,
  // 支付金额
  payMoney: 0,
  remark: '备注',
})

const payment = () => {
  if (money.value === '') {
    uni.showToast({
      title: '请输入金额',
      duration: 1000,
      icon: 'none',
    })
  } else {
    formdata.value.payMoney = money.value * 100
    qrCodePay(formdata.value).then((res) => {
      console.log(res)
      if (res.code === 1401) {
        uni.navigateTo({
          url: '/pages/login/login',
        })
      } else if (res.code === 123) {
        uni.showToast({
          title: '余额不足',
          duration: 1000,
          icon: 'none',
        })
        uni.navigateTo({
          url: '/pages/card/topup',
        })
      } else if (res.code === 0) {
        uni.showToast({
          title: res.msg,
          duration: 2000,
          icon: 'none',
        })
        uni.navigateTo({ url: `/pages/order/details?id=${res.data.orderPayNo}` })
      } else {
        uni.showToast({
          title: res.msg,
          duration: 2000,
          icon: 'none',
        })
      }
    })
  }
}

onLoad((query) => {
  if (query.merchantId) {
    console.log('扫码进入时携带商户id')
    merchantId.value = query.merchantId
  } else {
    console.log('扫码进入时未携带商户id')
  }
})
</script>

<style scoped>
.bg-color {
  background-color: #f5f5f9;
}

.catian {
  border-radius: 20rpx;
}

.flex-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.bg-blue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  font-size: 35rpx;
  color: #fff;
  background-color: #1677ff;
  border-radius: 15rpx;
}

.remark {
  margin: 10rpx;
  color: #607ca4;
}

.font-max {
  font-size: 40rpx;
}

.fontmax {
  font-size: 35rpx;
}

::v-deep .wd-input {
  width: 90%;
}

::v-deep .wd-input .wd-input__inner {
  font-size: 35rpx !important;
}
</style>
